<template>
  <a-modal
    :title="formTile + '工艺库'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-steps :current="current">
        <a-step
          v-for="item in steps"
          :key="item"
          :title="item"
        />
      </a-steps>
      <div class="steps-content">
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <div v-show="current == 0">
              <a-descriptions
                bordered
                :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
              >
                <a-descriptions-item label="单号">
                  {{billNo}}
                </a-descriptions-item>
                <a-descriptions-item label="版次">
                  {{billList.bc}}
                </a-descriptions-item>
                <a-descriptions-item label="第几件">
                  {{billList.js}}
                </a-descriptions-item>
                <a-descriptions-item label="上货季">
                  {{billList.scseason}}
                </a-descriptions-item>
                <a-descriptions-item label="样衣号">
                  {{billList.sampleCode}}
                </a-descriptions-item>
                <a-descriptions-item label="款号">

                </a-descriptions-item>
                <a-descriptions-item label="品名">
                  {{billList.sampleName}}
                </a-descriptions-item>
                <a-descriptions-item label="品类">
                  {{billList.sampleCat}}
                </a-descriptions-item>
                <a-descriptions-item label="工艺师">
                  {{statusUser}}
                </a-descriptions-item>
                <a-descriptions-item label="制版师">
                  {{billList.bs}}
                </a-descriptions-item>
                <a-descriptions-item label="放码师">
                  {{billList.fmshor}}
                </a-descriptions-item>
                <a-descriptions-item label="时间">
                  {{statusTime}}
                </a-descriptions-item>
              </a-descriptions>
              <a-card>
                <a-form
                  :form="form"
                  :labelCol="formItemLayout.labelCol"
                  :wrapperCol="formItemLayout.wrapperCol"
                >

                  <a-form-item
                    label="后道工序"
                    style="text-align:left"
                  >
                    {{firstForm.beof}}
                  </a-form-item>
                  <a-form-item
                    label="面料正反面说明"
                    style="text-align:left"
                  >
                    {{firstForm.fabricDesc}}
                  </a-form-item>
                  <a-form-item
                    label="纸样数量"
                    style="text-align:left"
                  >
                    {{firstForm.zyNum}}
                  </a-form-item>
                  <a-form-item
                    label="裁床注意"
                    style="text-align:left"
                  >
                    {{firstForm.cutting}}
                  </a-form-item>
                  <a-form-item
                    label="工序流程"
                    style="text-align:left"
                  >
                    {{firstForm.process}}
                  </a-form-item>
                  <a-form-item
                    label="粘衬部位"
                    style="text-align:left"
                  >
                    {{firstForm.interlining}}
                  </a-form-item>
                  <a-form-item
                    label="特艺-排料/剪裁要求"
                    style="text-align:left"
                  >
                    {{firstForm.tyReq}}
                  </a-form-item>
                  <a-form-item
                    label="特艺/特殊工艺"
                    style="text-align:left"
                  >
                    {{firstForm.tyProcess}}
                  </a-form-item>
                  <a-form-item
                    label="常规工艺要求"
                    style="text-align:left"
                  >
                    {{firstForm.commonReq}}
                  </a-form-item>
                </a-form>
              </a-card>
            </div>
            <div v-show="current == 1">
              <a-form
                :form="form1"
                @submit="next1"
              >
                <div style="display: flex;width: 40%;margin: auto;justify-content: space-between;">
                  <a-form-item label="款式图">
                    <img
                      style="width: 150px;height: 149px;object-fit: scale-down;"
                      :src="styleImg"
                      @click="prevImg(styleImg)"
                      alt=""
                    >
                  </a-form-item>
                  <a-form-item label="细节图">
                    <img
                    v-if="detailImg"
                      style="width: 150px;height: 149px;object-fit: scale-down;"
                      :src="detailImg"
                       @click="prevImg(detailImg)"
                      alt=""
                    >
                  </a-form-item>
                </div>
              </a-form>
            </div>
            <div v-show="current == 2">
              <a-table
                :columns="columns"
                :data-source="craftBillTemplate"
              >
              </a-table>
            </div>
            <div v-show="current == 3">
              <a-table
                :columns="columns2"
                v-if="craftBillPart.length"
                :defaultExpandAllRows="true"
                :data-source="craftBillPart"
              >
                <a-table
                  slot="expandedRowRender"
                  slot-scope="record"
                  :columns="innerColumns"
                  :data-source="record.craftStep"
                  :pagination="false"
                >
                  <template
                    slot="imgurl"
                    slot-scope="txt, record"
                  >
                    <img
                      style="height: 100px;object-fit: scale-down;"
                      :src="record.imgurl"
                       @click="prevImg(record.imgurl)"
                      :alt="record.imgurl"
                    >
                  </template>
                </a-table>
              </a-table>
            </div>
            <div v-show="current == 4">
              <a-table
                :columns="columns3"
                :data-source="craftBillSpec"
              >
                <template
                  slot="imgurl"
                  slot-scope="txt, record"
                >
                  <img
                   @click="prevImg(record.imgurl)"
                    style="height: 100px;object-fit: scale-down;"
                    :src="record.imgurl"
                    :alt="record.imgurl"
                  >
                </template>

              </a-table>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="steps-action">
        <a-button
          type="primary"
          @click="reset"
        >返回</a-button>
        <div>
          <a-button
            v-if="current > 0"
            style="margin-left: 8px"
            @click="prev"
          >
            上一步
          </a-button>
          <a-button
            v-if="current == 0 "
            type="primary"
            style="margin-left: 8px"
            @click="handleSubmit"
          >
            下一步
          </a-button>
          <a-button
            v-if="current == 1"
            type="primary"
            style="margin-left: 8px"
            @click="next1"
          >
            下一步
          </a-button>
          <a-button
            v-if="current == 2"
            type="primary"
            style="margin-left: 8px"
            @click="next2"
          >
            下一步
          </a-button>
          <a-button
            v-if="current == 3"
            type="primary"
            style="margin-left: 8px"
            @click="next3"
          >
            下一步
          </a-button>
        </div>
      </div>
    </div>
      <a-modal
      v-model="showBigImg"
      title="图片预览"
      @ok="showBigImg = false"
      :footer="null"
      width="60%"
      :mask="true"
    >
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>

    </a-modal>

  </a-modal>

</template>

<script>
import { getBillList, getDetailList } from '@api/rd/index'

const columns = [
  {
    title: '描述',
    dataIndex: 'description'
  }
]
const innerColumns = [
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    width: 500,
    dataIndex: 'description'
  }
]
const columns3 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '特艺',
    dataIndex: 'specId'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '跳码',
    dataIndex: 'jumpSize'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  }
]
const columns2 = [
  {
    title: '编号',
    width: 200,
    dataIndex: 'code'
  },
  {
    title: '工艺部位',
    width: 100,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 100,
    dataIndex: 'operName'
  }
]

export default {
  props: {
    content: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      id: '',
      columns,
      columns2,
      columns3,
      billNo: '',
      showBill: false,
      statusTime: '',
      statusUser: '',
      innerColumns,
      prevImageUrl:'',
      loading: false,
      showBigImg:false,
      idEdit: false,
      craftBillTemplate: [],
      craftBillSpec: [],
      detailImg: '',
      styleImg: '',
      disabled: false,
      firstForm: {},
      billList: {},
      craftBillPart: [],
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      current: 0,
      steps: ['录入工艺', '上传图片', '统一工艺', '部位信息', '特艺确认'],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const { content } = this.$props
    if (content) {
      this.formTile = '查看'
      this.id = content.id
      this.billNo = content.billNo
      this.$nextTick(() => {
        this.getBillList()
        this.disabled = true
        this.getDetail()
      })
      this.idEdit = true
    }
  },
  methods: {
    next() {
      this.current++
    },
    prev() {
      this.current--
    },
    handleSubmit(e) {
      e.preventDefault()
      this.current += 1
    },
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    reset() {
      this.form.resetFields()
      this.$emit('closeDetail')
    },
    next1(e) {
      e.preventDefault()
      this.current += 1
    },
    next2(e) {
      e.preventDefault()
      this.current += 1
    },
    next3(e) {
      e.preventDefault()
      this.current += 1
    },
    final(e) {
      e.preventDefault()
      this.submit()
    },
    async getDetail() {
      this.craftBillPart = []
      this.craftBillTemplate = []
      const params = {
        id: this.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          const detail = res.data
          this.statusUser = res.data.statusUser
          this.statusTime = res.data.statusTime
          this.firstForm = detail
          if (detail.styleImg) {
            this.styleImg = detail.styleImg
          }
          if (detail.detailImg) {
            this.detailImg = detail.detailImg
          }
          this.craftBillTemplate = detail.craftBillTemplateVos
          this.craftBillSpec = detail.craftBillSpecVos
          const newarr = []
          if (detail.craftBillPartVos.length) {
            detail.craftBillPartVos.map(item => {
              const arr = []
              const craftStep = {
                description: item.description,
                imgurl: item.imgurl,
                step: item.subSeq
              }
              arr.push(craftStep)
              const obj = {
                partId: item.partId,
                partName: item.partName,
                operId: item.operId,
                operName: item.operName,
                craftStep: arr,
                seq: item.seq
              }
              newarr.push(obj)
            })
            const result = newarr.reduce((acc, item) => {
              const itemInAcc = acc.find(itemAcc => itemAcc.seq === item.seq)
              if (!itemInAcc) {
                acc.push({ ...item, craftStep: item.craftStep })
              } else {
                itemInAcc.craftStep.push(item.craftStep[0])
              }
              return acc
            }, [])
            this.craftBillPart = result
          }
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单详情失败！')
      }
    },
    async getBillList() {
      const params = {
        billNo: this.billNo
      }
      try {
        const res = await getBillList('bill', params)
        if (res.code == 200) {
          this.billList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单失败！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}
.steps-action {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.ant-upload-picture-card-wrapper {
  width: 20%;
}
.ant-upload-picture-card-wrapper[data-v-7206a2ce] {
  width: 100%;
}
.dynamic-delete-button {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  margin: 50px 5px;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ant-upload-picture-card-wrapper[data-v-f7c29e7e] {
  width: 95%;
}
.steps-content[data-v-f7c29e7e] {
  padding-top: 20px;
}
.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
</style>
